<template>
  <van-nav-bar
    title="详情页面"
    left-text=""
    left-arrow
    @click-left="$router.back()"
    fixed
    placeholder
  />

  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in productObj.imgs" :key="image">
      <img :src="image" />
    </van-swipe-item>
  </van-swipe>

  <h5>{{ productObj.proname }}</h5>
  <p>{{ productObj.originprice }}</p>
  <p>{{ productObj.desc }}</p>

  <van-action-bar placeholder>
    <van-action-bar-icon icon="cart-o" text="购物车" :badge="cartArr.length" />
    <van-action-bar-button type="warning" text="加入购物车" @click="cartAdd" />
    <van-action-bar-button type="danger" text="立即购买" />
  </van-action-bar>
</template>

<script setup>
//使用这个商品id，获取商品详情
// route.query.id
import { ref } from "vue";
import { showConfirmDialog, showSuccessToast, showToast } from "vant";
import { useRoute } from "vue-router";
import { cartAddReq } from "@/api/cart";
import { productDetail } from "@/api/product";
import router from "@/router";
import { loadCartList, cartArr } from "@/store/cart";
//拿到route对象
let route = useRoute();
// 获取搜索参数
console.log(route.query.id);

let productObj = ref({});

// cartAddReq().then
productDetail(route.query.id).then((r) => {
  console.log(r.data);
  //商品数据
  productObj.value = r.data.data;
});

// 加入购物车按钮 事件
async function cartAdd() {
  let token = localStorage.getItem("xx-mall-token");
  if (token == null) {
    //没有登录

    showConfirmDialog({
      title: "消息提示",
      message: "当前没有的登录，是否需要登录",
    })
      .then(() => {
        // on confirm
        router.push("/login");
      })
      .catch(() => {
        // on cancel
      });
  } else {
    //已经登录
    let uid = localStorage.getItem("xx-mall-userid");
    let pid = route.query.id;
    let num = 1;
    let r = await cartAddReq(uid, pid, num);
    console.log(r.data);
    showSuccessToast("加入购物车成功");
    // showToast("加入购物车成功");
    loadCartList();
  }
  //
}
</script>

<style></style>
